.Page {
    width: 100%;
    height: calc(100% - 130px);
    padding: 16px 24px 40px 24px;

    .TopData {
        position: absolute;
        right: 0;
        top: -48px;
        padding-right: 32px;
        z-index: 1;
        user-select: none;

        &>div {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            font-size: 20px;
            color: #2F6BD2;

            &>span {
                margin-left: 8px;
                cursor: pointer;
            }
        }
    }

    &>.A01 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 1;




        &>.DataA01 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;

            &>div {
                margin: 8px;
                width: calc(20% - 16px);

                &>div:nth-child(1) {
                    height: 72px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 26px;
                    color: #FFFFFF;
                    background: rgba(45, 97, 198, 0.8);
                }

                &>div:nth-child(2) {
                    height: 112px;
                    background: rgba(255, 255, 255, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: R-Spectr;
                    font-size: 60px;
                    color: #030306;
                }
            }
        }

        &>.BtmBox {
            flex: 1;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            &>div {
                flex: 1;
                height: 100%;
                margin: 0 8px;

                &.Left {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    overflow: hidden;

                    &>.Title {
                        width: 100%;
                        height: 72px;
                        background: linear-gradient(90deg, rgba(8, 37, 183, 0.7), rgba(85, 131, 208, 0.7));
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-family: MicrosoftYaHei;
                        font-weight: bold;
                        font-size: 30px;
                        color: #FFFFFF;
                        user-select: none;
                    }

                    &>.Top {
                        width: 100%;
                        background: rgba(255, 255, 255, 0.35);
                        height: 132px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 6px 8px;
                        font-family: MicrosoftYaHei;
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 22px;
                        color: #FFFFFF;
                        padding-right: 16px;

                        &>div {
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin: 0 4px;
                            white-space: pre-wrap;
                            background: rgba(80, 125, 209, 1);

                            &:nth-child(1) {
                                width: 100px;
                            }
                        }
                    }

                    &>.List {
                        width: 100%;
                        flex: 1;
                        width: 100%;
                        padding: 0 8px;
                        background: rgba(255, 255, 255, 0.35);
                        flex: 1;
                        overflow-y: scroll;

                        &>div {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            height: 80px;
                            margin-bottom: 6px;

                            &>div {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(255, 255, 255, 0.9);
                                height: 100%;
                                margin: 4px 0;
                                font-family: MicrosoftYaHei;
                                font-weight: bold;
                                font-size: 20px;
                                color: #252525;
                                text-align: center;

                                &:first-child {
                                    width: 130px;
                                    margin-left: 4px;
                                    margin-right: 6px;
                                    cursor: pointer;
                                }

                                &:last-child {
                                    flex: 1;

                                    &>div {
                                        flex: 1;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                }
                            }
                        }

                        &::-webkit-scrollbar {
                            width: 12px;
                            height: 12px;
                        }

                        &::-webkit-scrollbar-button {
                            height: 0;
                            width: 0;
                            display: none;
                        }

                        &::-webkit-scrollbar-track {
                            border-radius: 12px;
                            background: rgba(255, 255, 255, 0.75);
                        }

                        &::-webkit-scrollbar-thumb {
                            border-radius: 12px;
                            background: rgba(56, 88, 203, 0.95);

                            &:hover {
                                transition: all 0.35s;
                                background: rgba(56, 88, 203, 1);
                            }
                        }
                    }
                }

                &.Right {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    &>.Title {
                        width: 100%;
                        height: 72px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &>div {
                            flex: 1;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border: 1px solid #3D60CC;
                            font-family: MicrosoftYaHei;
                            font-weight: bold;
                            font-size: 32px;
                            color: #4E7CD1;
                            cursor: pointer;
                            user-select: none;
                            transition: all 0.15s;

                            &.active {
                                background: linear-gradient(90deg, rgba(8, 37, 183, 0.7), rgba(85, 131, 208, 0.7));
                                color: white;
                                border: none;
                                position: relative;
                                z-index: 1;
                                font-size: 40px;

                                &::after {
                                    position: absolute;
                                    content: '';
                                    left: calc(50% - 2px);
                                    bottom: 6px;
                                    width: 0;
                                    height: 0;
                                    border-width: 8px 4px 0;
                                    border-style: solid;
                                    border-color: white transparent transparent;
                                }
                            }
                        }
                    }

                    &>.Charts {
                        width: 100%;
                        flex: 1;
                        background: rgba(255, 255, 255, 0.6);
                    }
                }
            }
        }
    }

    &>.A02 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 1;

        &>.TopData {
            &>div {
                color: #A43838;
            }
        }

        &>.DataA01 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;

            &>div {
                margin: 8px;
                width: calc(20% - 16px);

                &>div:nth-child(1) {
                    height: 72px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 26px;
                    color: #FFFFFF;
                    background: rgba(203, 79, 96, 0.8);
                }

                &>div:nth-child(2) {
                    height: 112px;
                    background: rgba(255, 255, 255, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: R-Spectr;
                    font-size: 60px;
                    color: #030306;
                }
            }
        }

        &>.TypeBox {
            width: 100%;
            flex: 1;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;

            &>.Title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                &>div {
                    flex: 1;
                    height: 72px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 30px;
                    color: rgba(181, 0, 0, 1);
                    border: 1px solid rgba(194, 97, 97, 1);
                    cursor: pointer;
                    user-select: none;

                    &.active {
                        background: linear-gradient(var(--deg), rgba(181, 0, 0, 1), rgba(212, 92, 168, 1));
                        color: white;
                        border: none;
                        position: relative;
                        z-index: 1;

                        &::after {
                            position: absolute;
                            content: '';
                            left: calc(50% - 2px);
                            bottom: 6px;
                            width: 0;
                            height: 0;
                            border-width: 8px 4px 0;
                            border-style: solid;
                            border-color: white transparent transparent;
                        }
                    }
                }
            }

            &>.List {
                flex: 1;
                width: 100%;
                background: rgba(255, 255, 255, 0.5);
                padding: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                overflow: hidden;

                &>.Top {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    margin-bottom: 8px;

                    &>div {
                        font-family: MicrosoftYaHei;
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 22px;
                        color: #FFFFFF;
                        margin-right: 8px;
                        white-space: pre-wrap;

                        &:last-child {
                            margin-right: 12px;
                        }
                    }

                    &>.Top__A01 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        height: 100px;
                        background: rgba(194, 97, 97, 1);
                    }

                    &>.Top__A02 {
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;

                        &>div:nth-child(1) {
                            width: 100%;
                            flex: 2;
                            margin-bottom: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(194, 97, 97, 1);
                        }

                        &>div:nth-child(2) {
                            width: 100%;
                            flex: 3;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &>div {
                                flex: 1;
                                height: 100%;
                                margin-right: 8px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                text-align: center;
                                background: rgba(194, 97, 97, 1);

                                &:last-child {
                                    margin-right: 0;
                                }
                            }


                        }
                    }
                }

                &>.List_Item {
                    width: 100%;
                    flex: 1;
                    overflow-y: scroll;

                    &>div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 8px;

                        &>div:nth-child(1) {
                            width: 200px;
                            height: 128px;
                            margin-right: 8px;
                            background: rgba(255, 255, 255, 0.6);
                            font-family: MicrosoftYaHei;
                            font-weight: bold;
                            font-size: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #3E81FF;
                        }

                        &>div:nth-child(2) {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex: 1;
                            height: 128px;
                            margin-right: 8px;
                            background: rgba(255, 255, 255, 0.6);

                            &>div {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-family: MicrosoftYaHei;
                                font-weight: bold;
                                font-size: 20px;
                                color: #252525;
                            }
                        }

                        &>div:nth-child(3) {
                            width: 270px;
                            height: 128px;
                            background: rgba(255, 255, 255, 0.6);
                            overflow: hidden;

                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;

                            &>div:first-child {
                                width: 100px;
                                height: 100px;
                                overflow: hidden;
                                margin-right: 16px;
                            }

                            &>div:last-child {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;
                                padding-right: 16px;

                                &>div {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin: 2px 0;

                                    &>div:nth-child(1) {
                                        width: 64px;
                                        height: 32px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: var(--color);
                                        font-family: MicrosoftYaHei;
                                        font-weight: bold;
                                        font-size: 20px;
                                        color: #FFFFFF;
                                        margin-right: 8px;
                                    }

                                    &>div:nth-child(2) {
                                        font-family: MicrosoftYaHei, MicrosoftYaHei;
                                        font-weight: bold;
                                        font-size: 20px;
                                        color: var(--color);
                                    }
                                }
                            }
                        }
                    }




                    &::-webkit-scrollbar {
                        width: 12px;
                        height: 12px;
                    }

                    &::-webkit-scrollbar-button {
                        height: 0;
                        width: 0;
                        display: none;
                    }

                    &::-webkit-scrollbar-track {
                        border-radius: 12px;
                        background: rgba(255, 255, 255, 0.75);
                    }

                    &::-webkit-scrollbar-thumb {
                        border-radius: 12px;
                        background: rgba(203, 79, 96, 0.95);

                        &:hover {
                            transition: all 0.35s;
                            background: rgba(203, 79, 96, 1);
                        }
                    }
                }
            }

            &>.Charts {
                flex: 1;
                width: 100%;
                background: rgba(255, 255, 255, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 16px;

                &>.Charts__Nav {
                    width: 100%;
                    height: 72px;
                    margin-bottom: 24px;

                    &>.SwiperBox {
                        height: 100%;
                        width: 100%;

                        .swiperItem {
                            width: 100%;
                            height: 100%;
                            background: rgba(255, 255, 255, 0.7);
                            border: 1px solid rgba(179, 84, 98, 0.7);
                            font-family: MicrosoftYaHei;
                            font-weight: bold;
                            font-size: 26px;
                            color: #B35462;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;

                            &.active {
                                background: rgba(194, 97, 97, 0.8);
                                color: white;
                            }
                        }
                    }
                }

                // &>.Charts__Nav {
                //     width: 100%;
                //     height: 72px;
                //     overflow-x: scroll;
                //     margin-bottom: 24px;

                //     &>div {
                //         display: flex;
                //         align-items: center;
                //         justify-content: flex-start;

                //         &>div {
                //             width: 200px;
                //             height: 72px;
                //             background: rgba(255, 255, 255, 0.7);
                //             border: 1px solid rgba(179, 84, 98, 0.7);
                //             font-family: MicrosoftYaHei;
                //             font-weight: bold;
                //             font-size: 26px;
                //             color: #B35462;
                //             display: flex;
                //             align-items: center;
                //             justify-content: center;
                //             cursor: pointer;

                //             &.active {
                //                 background: rgba(194, 97, 97, 0.8);
                //                 color: white;
                //             }
                //         }
                //     }

                //     &::-webkit-scrollbar {
                //         display: none;
                //     }
                // }

                &>.Charts__Box {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &>.left {
                        height: 100%;
                        flex: 140;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        margin-right: 24px;

                        &>div {
                            width: 100%;

                            &.Title {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-bottom: 16px;
                                height: 20px;

                                &>div:nth-child(1) {
                                    font-family: MicrosoftYaHei;
                                    font-size: 18px;
                                    color: #030306;
                                    padding: 0 24px;
                                    line-height: 20px;
                                    position: relative;
                                    z-index: 1;

                                    &::after {
                                        position: absolute;
                                        content: '';
                                        width: 0;
                                        height: 0;
                                        top: 0;
                                        left: 0;
                                        border-width: 10px 0 10px 16px;
                                        border-style: solid;
                                        border-color: transparent transparent transparent #B35462;

                                    }
                                }

                                &>div:last-child {
                                    flex: 1;
                                    height: 2px;
                                    background: #B35462;
                                }
                            }

                            &.Charts__details {
                                flex: 1;
                            }
                        }
                    }

                    &>.right {
                        height: 100%;
                        flex: 45;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &>div {
                            width: 320px;

                            &>div:nth-child(1) {
                                height: 122px;
                                background: #B35462;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;

                                &>div:nth-child(1) {
                                    font-family: MicrosoftYaHei;
                                    font-weight: bold;
                                    font-size: 30px;
                                    color: #FFFFFF;
                                }

                                &>div:nth-child(2) {
                                    font-family: MicrosoftYaHei;
                                    font-weight: bold;
                                    font-size: 24px;
                                    color: #FFFFFF;
                                }
                            }

                            &>div:nth-child(2) {
                                height: 150px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-family: Pixel;
                                font-weight: normal;
                                font-size: 48px;
                                color: #030306;
                                background: rgba(255, 255, 255, 0.92);
                                border: 4px solid rgba(179, 84, 98, 0.92);
                            }
                        }
                    }
                }
            }
        }
    }
}